<template>
    <div class="child">

        我是:{{ name }}, 战斗力:{{ initMax }} :counter:{{ counter }}

        <button @click="invokeParentFun($parent)">申请出战</button>
    </div>
</template>

<script setup lang="ts" name='Child'>
import { ref, reactive } from "vue";

const { name, initMax } = defineProps(['name', 'initMax'])

let counter = ref(0)


function invokeParentFun(parent) {

    // console.log("invokeParentFun", parent.heros);
    console.log(" parent.heros", parent.heros);


    parent.heros.push(name)

}


//给外部暴露一个对象
defineExpose({
    counter
})

</script>

<style scoped>
.child {
    background-color: rgba(223, 164, 125, 0.671);
    border-radius: 10px;
    padding: 10px;
    min-height: 90px;
    margin: 10px;

}
</style>